<template>
  <div style="background-color: #eee">
    <div class="card_box">
      <from-card>
        <div>
          <div class="search">
            <span>手机号</span>
            <div class="inlnBlock">
              <el-input v-model.trim="userData.userphone"></el-input>
            </div>
          </div>
          <div class="search">
            <span>微信昵称</span>
            <div class="inlnBlock">
              <el-input v-model.trim="userData.wxname"></el-input>
            </div>
          </div>
          <div class="search">
            <span>用户状态</span>
            <div class="inlnBlock">
              <el-select
                v-model.trim="userData.status"
                placeholder="用户状态"
                @change="statusChange"
              >
                <el-option
                  v-for="item in userstatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div style="width: 100%; margin-top: 20px; display: inline-block">
            <span style="margin-right: 10px">注册时间</span>
            <div style="display: inline-block">
              <picker
                @dataChange="starttimeChange"
                style="display: inline-block"
              ></picker>
            </div>
            至
            <div style="display: inline-block">
              <picker
                @dataChange="endtimeChange"
                style="display: inline-block"
              ></picker>
            </div>
            <div
              style="float: right; margin-right: 30px; display: inline-block"
            >
              <button-cn
                text="查询"
                @myclick="submin"
                style="display: inline-block; margin-right: 20px"
              ></button-cn>

              <button-cn
                text="重置"
                @myclick="Reset"
                style="display: inline-block"
              ></button-cn>
            </div>
          </div>
        </div>
      </from-card>
    </div>
    <!-- 表格 -->
    <div class="button_box">
      <div style="width: 103%">
        <span>用户列表</span>
        <div style="float: right">
          <div>
            <button-cn text="导出excel" @myclick="exportExcel"></button-cn>
          </div>
        </div>
      </div>
    </div>
    <from-card class="my_card">
      <el-table
        :data="getUserlistData"
        style="width: 100%"
        height="550"
        stripe
        @select="checketou"
        @select-all="checketou"
      >
        <el-table-column type="selection" width="100"> </el-table-column>
        <el-table-column label="手机号" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.userMobile || "暂无数据" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="微信昵称" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.wxName || "暂无数据" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="头像" align="center">
          <template slot-scope="scope">
            <div>
              <img
                :src="scope.row.avatarUrl"
                :alt="scope.row.wxName"
                style="height: 60px"
                class="init_img"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="用户状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.userStatus == 0"
              >正常</el-tag
            >
            <el-tag type="danger" v-else>禁用</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </from-card>
    <!-- 底部页码选择器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="userData.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="userData.count"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getUserlist, img111upload, excelFun } from "@/request/index";
import picker from "@/components/from/DateTimePicker";
import fromCard from "../../components/from/card.vue";
import buttonCn from "../../components/from/button-cn.vue";
import imgupload from "../../components/from/imgupload.vue";
import axios from "axios";
import ButtonCn from "../../components/from/button-cn.vue";
import AlertCn from "../../components/from/alert-cn.vue";
export default {
  data() {
    return {
      fileObject: {
        imgFile: "",
      },
      imageUrl: "",
      bannerTitle: "",
      total: 0,
      getUserlistData: [],
      excelData: [],
      currentPage4: 4,
      userData: {
        userphone: null,
        wxname: null,
        starttime: null,
        endtime: null,
        status: null,
        count: 10,
        page: 1,
      },
      userstatus: [
        {
          value: 0,
          label: "正常",
        },
        {
          value: 1,
          label: "禁用",
        },
      ],
      value: "",
    };
  },

  components: {
    fromCard,
    buttonCn,
    imgupload,
    ButtonCn,
    picker,
    AlertCn,
  },
  created() {
    this.bannerTitle = this.$route.query.name;
    this.$vuex.state.bookList.map((item) => {
      if (item.name != this.$route.query.name) {
        this.$vuex.state.bookList.push(this.$route.query);
    
      }
    });
    this.getUserMethods();
  },
  mounted() {},
  methods: {
    Reset() {
      for (var item in this.userData) {
        if (item == "count" || item == "page") return;
        this.userData[item] = null;
      }
    },
    endtimeChange(data) {
      this.userData.endtime = data;
    },
    // userData.starttime"
    starttimeChange(data) {
      this.userData.starttime = data;
    },
    submin() {
      this.userData.page = 1;
      this.userData.count = 10;
      this.getUserMethods();

      this.$message.success("查询成功");
    },
    statusChange(status) {
      this.userData.status = status;
    },
    // excel
    exportExcel() {
      var excelList = [];
      this.excelData.map((item) => {
        excelList.push(item.userId);
      });
      if (this.excelData <= 0) return this.$message.error("请选择要导出的数据");
      excelFun(excelList.toString()).then((res) => {
        // console.log(res);
        if (res.code !== "0000") return this.$message.error(res.msg);
        this.$message.success(res.msg+'');
        window.open(res.data.filePath);
      });
    },
    checketou(vm) {
      this.excelData = vm;
    },
    // 初始化数据
    getUserMethods() {
      const { userphone, wxname, starttime, endtime, status, count, page } =
        this.userData;
      getUserlist(
        userphone,
        wxname,
        starttime,
        endtime,
        status,
        count,
        page
      ).then((res) => {
        if (res.code !== "0000") return this.$message.error(res.msg);
   
        this.total = res.data.total;
        this.getUserlistData = res.data.data;
      });
    },

    handleSizeChange(val) {
      this.userData.count = val;
      this.getUserMethods();
    },
    handleCurrentChange(val) {
      this.userData.page = val;
      this.getUserMethods();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../components/style/index.scss";
@import "../../components/style/init_el_checkout.scss";

::v-depp .button_box[data-v-d9de66ea] {
  line-height: 3.14286rem !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.init_img:hover {
  cursor: $cursor;
}

.button_box {
  height: 100px;
  line-height: 100px;
  width: 95%;

  margin: 0 auto;

  // background-color: #409eff;
}

::v-deep .el-table tr {
  background-color: #f5f5f5;
}

input[type="checkbox"] {
  cursor: pointer;
  position: relative;
  width: 15px;
  height: 15px;
  font-size: 14px;
}

input[type="checkbox"]::after {
  position: absolute;
  top: 0;
  color: #000;
  width: 15px;
  height: 15px;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: " ";
  border-radius: 3px;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  background-color: #eb5f08;
}
.search {
  // width: 40%;
  display: inline-block;
  // margin-top: 20px;
  margin-right: 68px;
  .inlnBlock {
    display: inline-block;

    margin-left: 20px;
  }
}
::v-deep .el-input {
  width: 170px !important;
}
::v-deep .el-input__inner {
  border-radius: 50px;
}
</style>
